<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import '@/uni_modules/uview-ui/index.scss';
/* 字体图标 */
@import '@/static/css/iconfont.css';

[class^='my-icon-'],
[class*=' my-icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 底图、渐变
.blur-background {
  background: #e08abf
    url('https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/7b97e51a87cd890c3feb59ffbce074f7.png') center top
    no-repeat;
  background-size: cover;
}

// 渐变
// global-menus
.global-menus-bg {
  background: linear-gradient(
    127deg,
    rgba(201, 36, 178, 0.15) 0%,
    rgba(28, 147, 223, 0) 40%,
    rgba(0, 137, 255, 0.15) 80%,
    rgba(0, 137, 255, 0.35) 100%
  );
}

// game-tabs
.game-tabs-linear-gradient {
  background: linear-gradient(45deg, rgba(201, 36, 178, 0.3) 20%, rgba(28, 147, 223, 0.3) 80%);
}

// game-data-top
.game-data-top-bg {
  background-image: linear-gradient(45deg, #77b7fa 0%, #84ffe7 100%);
}

// sujiang-行者记录
.sujiang-xingzhe-log-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.4) 0%, rgba(119, 183, 250, 0.1) 100%);
}

// sujiang-历史最佳
.sujiang-history-best-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.2) 0%, rgba(119, 183, 250, 0.05) 100%);
}

// 赛事报名-必填字段
.game-apply-must-linear-gradient {
  background: linear-gradient(45deg, rgba(201, 36, 178, 0.2) 20%, rgba(28, 147, 223, 0.2) 80%);
}

// 赛事报名-赛点选择
.game-apply-site-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.4) 0%, rgba(119, 183, 250, 0.3) 100%);
}

// 赛事报名-选填字段
.game-apply-nomust-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.4) 0%, rgba(119, 183, 250, 0.1) 100%);
}

// xiaoma-今日
.xiaoma-today-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.2) 0%, rgba(119, 183, 250, 0.05) 100%);
}

// xiaoma-历史最佳
.xiaoma-history-best-bg {
  background: linear-gradient(-45deg, rgba(201, 36, 178, 0.1) 0%, rgba(28, 147, 223, 0) 40%, rgba(28, 147, 223, 0) 80%);
}

// xiaoma-游戏排名
.xiaoma-game-paiwei-bg {
  background-image: linear-gradient(45deg, rgba(119, 183, 250, 0.4) 0%, rgba(119, 183, 250, 0.1) 100%);
}

// 游戏排名
.game-paiming-bg {
  background: linear-gradient(45deg, rgba(201, 36, 178, 0.3) 0%, rgba(28, 147, 223, 0) 40%, rgba(28, 147, 223, 0) 80%);
}
// 运动会排行榜-bg
.meeting-paihang-bg {
  background: linear-gradient(15deg, rgba(201, 36, 178, 0.1) 0%, rgba(28, 147, 223, 0.3) 100%);
}

// 历史战绩
.game-history-bg {
  background: linear-gradient(127deg, rgba(201, 36, 178, 0.2) 0%, rgba(28, 147, 223, 0) 40%, rgba(28, 147, 223, 0) 80%);
}
//data-charts-数据趋势
.data-charts-bg {
  background: linear-gradient(127deg, rgba(201, 36, 178, 0.2) 0%, rgba(28, 147, 223, 0) 60%, rgba(28, 147, 223, 0) 80%);
}

// course-list ,course-item-inner
.course-item-inner-bg {
  background: linear-gradient(45deg, rgba(201, 36, 178, 0.3) 0%, rgba(28, 147, 223, 0.3) 40%);
}

// order-list
.order-item-inner-bg {
  background: linear-gradient(45deg, rgba(201, 36, 178, 0.4) 0%, rgba(77, 167, 225, 0.4) 40%);
}

// button-bg
.btn-bg {
  background: linear-gradient(45deg, #00e2ff 0%, #77b7fa 56%, #f887f4 100%);
}

.btn-selected-bg {
  background: linear-gradient(45deg, #00e2ff 0%, #77b7fa 56%, #f887f4 100%);
}

// 晋级弹窗-bg
.win-box-bg {
  background: linear-gradient(45deg, rgba(86, 87, 117, 1) 0%, rgba(86, 87, 117, 0.1) 80%, rgba(86, 87, 117, 0) 100%);
}

// 渐变 ---end

// image {
//   border-radius: 12rpx;
// }
.position-relat {
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.flex-row-flex-start-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
}

.flex-row-space-between-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
}
.flex-row-flex-start {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}
.flex-row-flex-start-start {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: center;
  flex: 0 0 auto;
}
.flex-row-flex-end {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-column-flex-start {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-column-flex-start-start {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
}
.flex-column-flex-start-end {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
}
.flex-column-flex-end-center {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  flex: 0 0 auto;
}
.flex-column-flex-end-space-between {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: flex-end;
  flex: 0 0 auto;
}
.flex-column-flex-start-space-between {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
}
.flex-column-flex-end-space-around {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: flex-end;
  align-content: flex-end;
  flex: 0 0 auto;
}

.flex-row-space-between {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-row-space-around {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-row-center {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}
.flex-row-center-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-column-cc {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-start-center {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}

.flex-center-start {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
}

.flex-center-center {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
}

.flex-between-center {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.flex-between-end {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-end;
}

.flex-between-start {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-start;
}

.flex-column-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}

.flex-column-end {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}
.flex-column-center-end {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
}

.flex-column-between {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}

.flex-column-cc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.flex-row-cc {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.flex-end-center {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
}

.flex-start-end {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: flex-end;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
}

// BFC

.clearfix {
  &::after {
    display: block;
    clear: both;
    content: '';
  }
}

.center {
  text-align: center;
}

.padding-20 {
  padding: $padding-r-20;
}

.padding-20-0 {
  padding: $padding-r-20 0;
}

.padding-0-20 {
  padding: 0 $padding-r-20;
}

.padding-0-38 {
  padding: 0 38rpx;
}

.margin-32 {
  margin: $padding-r-32;
}

.margin-20 {
  margin: $padding-r-20;
}

.margin-0-12 {
  margin: 0 $margin-t-12;
}

.padding-b-border-38 {
  padding-bottom: 38rpx;
  border-bottom: 2rpx solid rgba(145, 158, 174, 0.2);
}

.radius-40 {
  border-radius: 40rpx;
  background-color: #fafafa;
  padding: 16rpx 30rpx;
  font-size: 24rpx;
}

.shop-icon.shop-icon-2 {
  transform: rotate(90deg);
  margin-top: 0 !important;
  margin-left: 6rpx !important;
}

.btn {
  width: 356rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #45aff0, #42abe7);
  border-radius: 12rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin: 0 auto;
}

.btn2 {
  width: 200rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #45aff0, #42abe7);
  border-radius: 40rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin: 0 auto;
}
.my-btn {
  width: 627rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(135deg, #45aff0, #42abe7);
  border-radius: 40rpx;
  font-family: PingFang SC;
  font-size: 31rpx;
  letter-spacing: 0rpx;
  color: #ffffff;
  margin: 0 auto;
  display: block;
}

.meta-btn-bg {
  background: linear-gradient(45deg, #00e2ff 0%, #77b7fa 56%, #f887f4 100%);
}

.disabled {
  background: #d5d5d5 !important;
  color: #fff !important;
}
.cancel-btn {
  background: #8ca1b3 !important;
  color: #fff !important;
}
button {
  border-radius: 0;
  outline: none;
  &::before,
  &::after {
    outline: none;
    border: none;
  }
}

.margin-t-24 {
  margin-top: 24rpx;
}

.padding-t-r-l-20 {
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.popup-wrap {
  margin: 0 auto;
  padding: 18rpx 0;

  .popup-item {
    text-align: center;
    width: 100vw;
    font-size: 32rpx;
    line-height: 80rpx;
    font-weight: 600;
  }

  .popup-item-bottom {
    border-top: 2rpx solid #eaeaea;
  }

  .cancel {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #eaeaea;
    font-weight: 400;
    color: #999;
  }
}

.margin-r-15 {
  margin-right: 15rpx;
}

.margin-l-15 {
  margin-left: 15rpx;
}

.margin-r-10 {
  margin-right: 10rpx;
}

.margin-t-10 {
  margin-top: 10rpx;
}

.margin-l-10 {
  margin-left: 10rpx;
}

.margin-b-20 {
  margin-bottom: 20rpx;
}

.u-scroll-list {
  padding-bottom: 0 !important;
}

.u-checkbox__icon-wrap--circle {
  margin-left: 8rpx;
}

.u-checkbox text {
  font-family: PingFang SC;
  font-size: 27rpx;
  line-height: 62rpx;
  letter-spacing: 0rpx;
  color: #343434;
}
.u-fade-enter-to {
  z-index: 3;
}
.u-popup__content {
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
  .u-modal {
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
    .u-modal__title {
      display: none;
    }
    .u-modal__content {
      padding: 0 !important;
    }
    .u-line {
      display: none;
    }
    .u-modal__button-group {
      display: none;
    }
  }
  .u-picker,
  .u-safe-bottom {
    background: #fff !important;
  }
}
.u-picker,
.u-safe-bottom {
  background: #fff !important;
}
.search-box {
  .uni-easyinput {
    border-radius: 35rpx;
    border: solid 2rpx #ffffff;
    .uni-easyinput__content {
      border-color: transparent !important;
      background-color: transparent !important;
      input.uni-easyinput__content-input {
        color: #fff !important;
        caret-color: #fff !important;
        &::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.6) !important;
        }
      }
      .content-clear-icon {
        .uni-icons.uniui-search {
          color: #fff !important;
        }
        .uni-icons.uniui-clear {
          color: #c0c4cc !important;
        }
      }
    }
  }
  &.search-box-icon {
    .uni-easyinput {
      border-radius: 0rpx;
      border: solid 0rpx #ffffff;
      .uni-easyinput__content {
        border-color: transparent !important;
        background-color: transparent !important;
        input.uni-easyinput__content-input {
          color: #fff !important;
          caret-color: #fff !important;
          &::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.6) !important;
          }
        }
        .content-clear-icon {
          .uni-icons.uniui-search {
            color: #fff !important;
          }
          .uni-icons.uniui-clear {
            color: #c0c4cc !important;
          }
        }
      }
    }
  }
}

.u-tabs {
  .u-tabs__wrapper__nav__line {
    // opacity: 0 !important;
  }
}

.u-upload {
  .u-upload__wrap {
    .u-upload__wrap__preview {
      width: 223rpx;
      height: 223rpx;
      margin-bottom: 21rpx;
      margin-right: 21rpx;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, 1);
      .u-upload__wrap__preview__image {
        display: block;
      }
      .u-upload__wrap__preview__other {
        background: rgb(242, 242, 242, 0) !important;
      }
      .u-upload__deletable {
        position: absolute;
        top: 0;
        right: 0;
        width: 46rpx !important;
        height: 38rpx !important;
        background: #4c5980 !important;
        border-radius: 0rpx 0rpx 0rpx 23rpx !important;
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -16rpx;
          margin-left: -16rpx;
          width: 32rpx;
          height: 32rpx;
          background: url('https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/76b6358e700de6a5047556f637b931e3.png')
            center center no-repeat;
          background-size: 32rpx 32rpx;
          z-index: 2;
        }
        .u-upload__deletable__icon {
          position: relative !important;
          top: unset !important;
          right: unset !important;
          transform: scale(1) !important;
          display: none !important;
        }
      }
    }
  }
}
</style>
<script>
export default {
  globalData: {
    isFirstLogin: true,
    userInfo: {},
    token: '',
    openId: '',
    session_key: '',
    isGoLogin: null,
    tokenIsTimeout: true,
    isScanIngNewScene: false,
    scene: '',
    statusBarObject: {},
  },
  onLaunch: function (e) {
    // uni.hideTabBar({
    // 		animation: false
    // 		});
    console.log('----App onLaunch-2---');
  },
  onShow: function () {
    console.log('----app-show-3--');
    uni.hideTabBar({
      animation: false,
    });
  },
  onHide() {
    console.log('-----hide-----');
  },
  mounted() {
    console.log('------app-mounted-1------');
    this.statusData();
  },
  beforeDestroy() {
    console.log('-------beforeDestroy--------');
    if (this.task) {
      // close websocket
      this.task.close({
        success() {
          console.log('------websocket close ok------');
        },
      });
    }
  },
  methods: {
    statusData() {
      const systemInfo = uni.getSystemInfoSync();
      console.log('systemInfo==', systemInfo);
      const saveTop = systemInfo.safeAreaInsets.top;
      const saveBottom = systemInfo.safeAreaInsets.bottom;
      const pagePaddingBottom = saveBottom > 0 ? saveBottom + 43 + 30 : 77 + 30;

      //状态栏高度
      const statusBarHeight = systemInfo.statusBarHeight;
      // 获取胶囊按钮的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 胶囊距上距离
      const top = menuButtonInfo.top;
      // 胶囊高度
      const topBarHeight = menuButtonInfo.height;
      // 状态栏到胶囊的间距
      const topBarPadding = top - statusBarHeight;
      // 导航栏高度 = 状态栏到胶囊的间距（ 胶囊距上距离 - 状态栏高度 ）*2  +  胶囊高度
      const headerHeight = topBarPadding * 2 + topBarHeight;
      this.globalData.systemInfo = systemInfo;
      this.globalData.statusBarObject = {
        saveTop: saveTop,
        saveBottom: saveBottom,
        pagePaddingBottom: pagePaddingBottom,
        statusBarHeight: statusBarHeight, //状态栏高度
        top: top, // 胶囊距上距离
        topBarHeight: topBarHeight, // 胶囊高度
        topBarPadding: topBarPadding, // 状态栏到胶囊的间距
        headerHeight: headerHeight, // 导航栏高度
      };
    },
  },
};
</script>
